.request-preview {
    flex-grow: 1;

    &__status {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } 

    &__text {
        font-size: 16px;
    }

    &__button {
        border: none;
        padding: 9px 7px;
        cursor: pointer;
        font-size: 13px;
        color: var(--white);
        line-height: 8px;
        background: var(--btnGreen);
        border-radius: 8px;
        height: 48px;
        text-transform: uppercase;
        min-width: 183px;
        margin: 16px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        @media (prefers-color-scheme: dark) {
            color: var(--black);
        }

        @media (max-width: 640px) {
            width: calc(100% - 48px);
        }

        &--white {
            background-color: var(--white);
            color: var(--gray900);
            border: 1px solid var(--gray700);

            @media (prefers-color-scheme: dark) {
                color: var(--gray300);
                background-color: var(--black);
                border: 1px solid var(--gray400);
            }
        }

        &--red {
            background-color: var(--red400);
            color: var(--white);

            @media (prefers-color-scheme: dark) {
                color: var(--black);
            }
        }

        &:focus {
            outline: none;
        }
    }
}

.light-mode {
    .request-preview {
        &__button {
            color: var(--white);

            &--white {
                color: var(--gray900);
                background-color: var(--white);
                border: 1px solid var(--gray700);
            }

            &--red {
                color: var(--white);
            }
        }
    }
}

.dark-mode {
    .request-preview {
        &__button {
            color: var(--black);

            &--white {
                color: var(--gray300);
                background-color: var(--black);
                border: 1px solid var(--gray400);
            }

            &--red {
                color: var(--black);
            }
        }
    }
}